<template>
    <div class="big">
        <h3>BigBlock</h3>
        <p>我在 Big 里直接展示: {{ car.name }} / ￥{{ car.price }}</p>

        <MiddleBlock />
    </div>
</template>

<script setup>
import { provide, reactive } from 'vue'
import MiddleBlock from './MiddleBlock.vue'

const car = reactive({ name: 'benz', price: 100 })
provide('car', car)
</script>

<style scoped>
.big {
    background: #e3f2fd;
    padding: 20px;
    margin: 10px;
}
</style>